.Frame {
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #767779 url("../../assets/images/bg.jpg") no-repeat center center/ cover;
}

.el-header,
.el-footer {
    color: #333;
    text-align: center;
}

.my-autocomplete {
    -webkit-app-region: no-drag;

    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}

.headerToDrag {
}

.el-header {
    -webkit-app-region: drag;
    display: flex;
    justify-content: space-between;
    align-items: center;

    * {
        -webkit-app-region: no-drag;
    }

    .left {
        display: flex;
        justify-content: space-around;
        align-items: center;

        svg {
            margin-left: 113px;
        }

        i {
            margin: 0 0 0 10px;
            color: #ffffff;
        }
    }
    .right {
        i {
            margin: 0 10px 0 0;
            color: #ffffff;
        }
    }

    .input_out {
        position: relative;
        padding: 10px;

        &:hover {
            .History_and_recommendations {
                display: block;
            }
        }


        .History_and_recommendations {
            display: none;
            position: absolute;
            top: 40px;
            left: 0;
            color: #ffffff;
            background-color: rgba($color: #ffffff, $alpha: 0.7);
            z-index: 100;
            width: 100%;
            border-radius: 4px;
            text-align: left;
            padding: 3px;

            .el-icon-close {
                position: absolute;
                top: 6px;
                right: 10px;
            }

            h3 {
                padding-left: 10px;
                font-size: 14px;
                margin-bottom: 0;
            }

            .recommendations {
                display: flex;
                flex-wrap: wrap;
                padding-bottom: 2px;
            }
            .History {
                border-top: 1px solid rgba($color: rgb(22, 25, 28), $alpha: 0.8);
                display: flex;
                flex-wrap: wrap;
            }
            span {
                margin-top: 2px;
                padding: 0 3px;
                margin-right: 5px;
                font-size: 12px;
                background-color: rgba($color: #000000, $alpha: 0.4);
                border-radius: 6px;
            }
            .search_result {
                position: absolute;
                left: 210px;
                top: 0;
                transition: 0.6s;
                background-color: rgba($color: #ffffff, $alpha: 0.8);
                color: #000000;
                border-radius: 4px;
                text-align: left;
                padding: 3px;
                width: 350px;
                padding-bottom: 10px;

                .item {
                    h3 {
                        display: flex;
                        padding-top: 10px;
                        align-items: center;
                        svg {
                            width: 25px;
                            height: 25px;
                        }
                    }
                    p {
                        margin: 0;
                        padding-top: 8px;
                        padding-left: 30px;

                        &:hover {
                            background-color: rgba($color: #000000, $alpha: 0.1);
                        }
                    }
                }
            }
        }
    }
}

.el-aside {
    background-color: rgba(243, 229, 229, 0.2);
    color: #333;
    text-align: center;
    position: relative;
    overflow-y: auto;
    height: 60%;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 10px;

    .el-collapse {
        border: 0;
    }

    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 1px;
    }

    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background-color: transparent;
        // background-image: -webkit-linear-gradient(
        //     45deg,
        //     rgba(255, 255, 255, 0.2) 25%,
        //     transparent 25%,
        //     transparent 50%,
        //     rgba(255, 255, 255, 0.2) 50%,
        //     rgba(255, 255, 255, 0.2) 75%,
        //     transparent 75%,
        //     transparent
        // );
    }

    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        // background: #ededed;
    }

    .el-collapse {
        .el-collapse-item {
            .song-list {
                height: 250px;
                overflow-y: auto;

                &::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width: 1px;
                }

                &::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 10px;
                    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    // background-color: #f90;
                    // background-image: -webkit-linear-gradient(
                    //     45deg,
                    //     rgba(255, 255, 255, 0.2) 25%,
                    //     transparent 25%,
                    //     transparent 50%,
                    //     rgba(255, 255, 255, 0.2) 50%,
                    //     rgba(255, 255, 255, 0.2) 75%,
                    //     transparent 75%,
                    //     transparent
                    // );
                }

                &::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 10px;
                    // background: #ededed;
                }

                .song-item {
                    height: 60px;
                    // color: #8d1515;
                    // border: 1px solid black;
                }
            }
        }
    }
}

li {
    list-style: none;
}

.el-container {
    height: 100%;
}

.el-footer {
    // background-color: #535353;
    padding: 0;
    position: relative;
    padding-top: 2px;

    .ant-progress-line {
        position: absolute;
        top: -11px;
        left: 0;
    }

    .footer_main {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;

        .head_portrait {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            position: relative;
            border: 1px solid #ffffff;

            .name {
                position: absolute;
                top: 50%;
                left: 60px;
                transform: translateY(-50%);
                color: #ffffff;
                width: 100px;
                text-align: left;
                margin: 0;
            }

            img {
                width: 100%;
                border-radius: 6px;
            }

            &:hover {
                .toLyricPage {
                    opacity: 1;
                }
            }

            .toLyricPage {
                opacity: 0;
                transition: 0.3s;
                position: absolute;
                top: 0;
                left: 0;
                width: 50px;
                height: 50px;
                border-radius: 6;
                background-color: rgba(0, 0, 0, 0.2);

                svg {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .lyric_box {
            background-color: rgba(243, 229, 229, 0.2);
            width: 600px;
            height: 50px;
            border-radius: 6px;
            overflow: hidden;
            transition: 0.5s;
        }

        .middle_control {
            background-color: rgba(243, 229, 229, 0.2);
            width: 600px;
            height: 50px;
            border-radius: 6px;
            overflow: hidden;
            transition: 0.5s;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;

            .play_pause {
                svg {
                    width: 40px;
                    height: 40px;
                }
            }

            .play_item {
                svg {
                    width: 30px;
                    height: 30px;
                    margin: 0 5px;
                }
            }
        }

        .rigth_control {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 50px;
            position: relative;

            svg {
                width: 20px;
                height: 20px;
            }

            .volume_popover {
                position: absolute;
                top: -135px;
                left: -10px;
                background-color: rgba($color: #ffffff, $alpha: 0.8);
                padding: 15px 0;
                border-radius: 10px;
            }
        }
    }
}
